<style>
.user-info-top {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    background-image: url(../../../assets/image/person-center-back.jpg);
    .backImage {
        display: flex;
        width: 100%;
        position: absolute;
        background: white;
        bottom: 0;
        padding: 5px 10px;
        .user-info-top-left {
            min-width: 100px;

            img {
                border-radius: 50%;
                width: 100px;
                height: 100px;
                border: #ccccd7 solid 1px;
            }

            padding-right: 20px;
        }

        .user-info-top-right {
            display: flex;
            flex-direction: column;
            width: 100%;

            .user-info-top-right-top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .user-info-top-right-top-left {
                    font-size: 24px;
                    color: #222226;
                }

                .user-info-top-right-top-right {
                    .user-info-top-right-top-right-col {
                        display: flex;
                        align-items: center;
                        border-radius: 20px;
                        border: #ccccd7 solid 1px;
                        padding: 5px 15px;

                        .icon {
                            height: 16px;

                            img {
                                width: 16px;
                                height: 16px;
                            }
                        }

                        .text {
                            font-size: 16px;
                        }
                    }
                }
            }

            .user-info-top-right-mid {
                display: flex;

                .user-info-top-right-mid-col {
                    padding: 0px 20px;
                    margin: 10px 0;
                    border-right: #ccccd7 solid 1px;
                }
                .user-info-top-right-mid-col:nth-of-type(1) {
                    padding: 0px 20px 0 0;
                }
            }
            .user-info-top-right-bottom {
                font-size: 16px;
                color: #9ba2a9;
            }
            .user-info-top-right-fouthRow{
                padding: 10px 0;
            }
        }
    }

}
</style>
<template>
    <div class="user-info-top">
        <div class="backImage">
            <div class="user-info-top-left">
                <div class="user-info-avator">
                    <img :src="userInfo.avatar" alt="" object-fit="contain">
                </div>
            </div>
            <div class="user-info-top-right">
                <div class="user-info-top-right-top">
                    <div class="user-info-top-right-top-left">
                        <div class="user-info-nickname">{{ userInfo.nickname }}</div>
                    </div>
                    <div class="user-info-top-right-top-right" v-if="userInfo.id == visitId">
                        <div class="user-info-top-right-top-right-col">
                            <div class="icon">
                                <img src="../../../assets/image/like.png" alt="">
                            </div>
                            <div class="text" @click="jump(`/personCenter/${userId}/account`)">
                                编辑资料
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-info-top-right-mid">
                    <div class="user-info-top-right-mid-col">
                        {{ userInfo.allView?userInfo.allView:0 }}总浏览量
                    </div>
                    <div class="user-info-top-right-mid-col">
                        {{ userInfo.article?userInfo.article:0 }}文章数量
                    </div>
                    <div class="user-info-top-right-mid-col">
                        {{ userInfo.fensNum?userInfo.fensNum:0 }}粉丝数量
                    </div>
                </div>
                <div class="user-info-top-right-bottom">
                    IP属地：{{ userInfo.ipAddress }}
                </div>
                <div class="user-info-top-right-fouthRow">
                    个性签名：{{ userInfo.signature?userInfo.signature:'这个人很懒，什么都没有留下' }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { jump } from '@/utils/commonFunction';
export default {
    name: 'userInfoTop',
    props: {
        userInfo: {
            type: Object,
            default: () => {
                return {
                    nickname: "红豆面包",
                    avatar: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1qczlT.img?w=768&h=723&m=6&x=366&y=344&s=383&d=383",
                    allView: 100,
                    article: 100,
                    fensNum: 100,
                    ipAddress: "北京市",
                    signature: "我是一个测试个性签名"
                }
            }
        }
    },
    data() {
        return {
            userId:null,
            visitId:null,
        }
    },
    created(){
        this.userId = this.$route.params.userId;
        this.visitId = JSON.parse(localStorage.getItem('userInfo')).id;
    },
    methods: {
        jump,
        
    },
}
</script>